<template>
  <div class="rage-container" :class="{ view: songList.length > 0 }">
    <div class="loading-wrapper" v-if="!isloading">
      <div class="loading"></div>
      <div class="loading-txt">正在加载中</div>
    </div>
    <div class="container" v-else>
      <!-- 轮播图 -->
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="banner in banners" :key="banner.imageUrl"
          ><van-image :src="banner.imageUrl"></van-image
        ></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>

      <!-- 推荐歌单 -->
      <div class="recomendList">
        <van-cell is-link value="更多" :border="false" to="songList">
          <div slot="title" class="title">
            <van-icon name="notes-o"></van-icon>
            <div>推荐歌单</div>
          </div>
        </van-cell>
        <!-- 推荐内容 -->
        <div class="recomend-content">
          <van-grid :border="false" :column-num="3">
            <van-grid-item
              v-for="item in recomendSongList"
              :key="item.id"
              @click="toSongList(item)"
            >
              <div class="image-content">
                <van-image :src="item.picUrl"></van-image>
                <div class="number">{{ item.playCount | countFomat }}</div>
              </div>
              <div class="title">{{ item.name }}</div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <!-- 推荐歌单 -->

      <!-- 推荐mv -->
      <div class="recomendMv">
        <van-cell is-link value="更多" :border="false">
          <div slot="title" class="title">
            <van-icon name="tv-o"></van-icon>
            <div>推荐Mv</div>
          </div>
        </van-cell>
        <!-- 推荐内容 -->
        <div class="recomendMv-content">
          <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="item in recomendMvList" :key="item.id">
              <div class="image-content">
                <van-image :src="item.picUrl"></van-image>
                <div class="number">{{ item.playCount | countFomat }}</div>
              </div>
              <div class="title2">{{ item.name }}</div>
              <div class="autName">{{ item.artistName }}</div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <!-- 推荐mv -->
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.min.css'
import api from '../../api/index'
export default {
  name: 'rageIndex',
  components: {
    Swiper,
    SwiperSlide
  },
  props: {},
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          type: 'bullets'
        }
        // ...
      },
      banners: [],
      // 控制加载的显示与隐藏
      isloading: false,
      // 推荐歌单
      recomendSongList: [],
      // 推荐Mv
      recomendMvList: []
    }
  },
  computed: {
    ...mapGetters(['songList'])
  },
  filters: {
    countFomat: function(v) {
      if (v < 9999) {
        return v
      } else {
        return (v / 10000).toFixed(0) + '万'
      }
    }
  },
  watch: {},
  created() {
    this.getBannerList()
    this.getRecomendList()
    this.getRecomendMvList()
  },
  mounted() {},
  methods: {
    async getBannerList() {
      try {
        const { banners: result } = await this.$http.get(api.getBannerList())
        // console.log(result)
        this.banners = result
        this.isloading = true
      } catch (err) {
        this.$toast.fail('获取数据失败')
      }
    },
    async getRecomendList() {
      try {
        const { result } = await this.$http.get(api.getPersonalized())
        // console.log(result)
        this.recomendSongList = result.length > 6 && result.slice(0, 6)
      } catch (err) {
        this.$toast.fail('获取数据失败')
      }
    },
    async getRecomendMvList() {
      try {
        const { result } = await this.$http.get(api.getPersonalizedMV())
        console.log(result)
        this.recomendMvList = result
      } catch (err) {
        this.$toast.fail('获取数据失败')
      }
    },
    // 点击歌单列表跳转到相应的页面
    toSongList(item) {
      // console.log(typeof item.id)
      // this.$router.push({ path: `/playListDetail/${item.id}`, query: item })
      this.$router.push({
        name: 'playListDetail',
        params: {
          id: item.id,
          name: item.name,
          coverImg: item.picUrl,
          creator: item.copywriter,
          count: item.playCount,
          desc: item.description
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.view {
  padding-bottom: 108px;
}
.rage-container {
  height: 85vh;
  overflow-y: auto;
}
.loading-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .loading {
    width: 100px;
    height: 100px;
    background: url('../../../static/rage_loading.png') no-repeat;
    background-size: cover;
    -webkit-animation: rotating 5s linear infinite;
    animation: rotating 5s linear infinite;
  }
  .loading-txt {
    padding-top: 10px;
    color: #4a4a4a;
    font-size: 20px;
  }
}
// 加载动画
@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.box {
  height: 3000px;
}
/deep/ .swiper-container {
  width: 100%;
  height: 350px;
  background-color: #eee;
  .van-image {
    width: 100%;
    height: 100%;
  }
  .swiper-pagination-bullet {
    width: 20px !important;
    height: 20px !important;
  }
}

// 推荐歌单样式
.recomendList,
.recomendMv {
  /deep/ .van-cell {
    padding-left: 10px;
    padding-right: 10px;
    .title {
      display: flex;
      align-items: center;

      > div {
        font-size: 32px;
        padding-left: 10px;
        padding-top: 4px;
      }
      .van-icon {
        font-size: 40px;
        color: #dd6760;
      }
    }
  }
  /deep/ .recomend-content,
  .recomendMv-content {
    .van-grid {
      padding-left: 0 !important;
      .van-grid-item__content {
        padding-top: 0 !important;
        padding-bottom: 20px !important;
        .image-content {
          width: 100%;
          height: 100%;
          position: relative;
          overflow: hidden;
          .van-image {
            width: 100%;
          }
          .number {
            text-align: right;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            width: 100%;
            height: 40px;
            background-color: rgba(0, 0, 0, 0.2);
            color: #eee;
            line-height: 40px;
            font-size: 30px;
          }
        }
      }
      .title2,
      .title {
        width: 100%;
        font-size: 20px;
        text-align: left;
      }
      .title {
        height: 60px;
      }
      .title2 {
        // text-overflow: ellipsis;
        // white-space: nowrap;
        height: 40px;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .autName {
        width: 100%;
        font-size: 12px;
      }
    }
  }
  /deep/ .recomendMv-content {
    .van-grid {
      .van-grid-item__content {
        padding: 0 5px 5px 5px !important;
      }
    }
  }
}
// 推荐歌单样式
</style>
